<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div class="ads-box">
	<div class="ads-header">
    	<h3 > ĐĂNG TIN RAO VẶT</h3>
        <a href="" class="close" onClick="">x</a>
    </div>
    <div class="ads-body">
    	<div class="left-panel" >
        	<form id="dangtin" action="" method="" >
            	<div class="label" > TIÊU ĐỀ</div>
                <div class="title-ads">
                	<div class="cbotitle">
                	<select id="type-ads" name="type-ads">
                    	<option value="1">Cần mua</option>
                        <option value="2">Cần bán</option>
                    </select>
                    </div>
                    <div class="txttitle">
                    <input type="text" id="titleads" name="titleads" maxlength="150"/>
                    </div>
                </div>
                <div class="label">NỘI DUNG TIN </div>
                <div class="content-ads">
                	<input type="text" id="contentads" name="contentads" />   
                </div>
               
                <div class="twocol">
                	<div class="label">GIÁ</div>
                    <div class="price-ads">
                    	<input type="text" class="price" name="price" id="price"/>
                        <div>Đ</div>
                    </div>
                </div>
                 <div class="twocol">
                	<div class="label">DANH MỤC RAO</div>
                   
                    	<select id="category" name="category" class="category">
                    		<option value="1">Điện thoại</option>
                       	 	<option value="2">Laptop</option>
                            <option value="3">Xe máy</option>
                       	 	<option value="4">Quần áo</option>
                           
                    	</select>
                    
                </div>
                <div><br> <br> <br> <br> </div>
                
                <div class="lable" style="margin-top: 10px;"> ĐĂNG HÌNH ĐỂ BÁN CHẠY HƠN</div>
                <div id="image-zone">
                	<div id="drop-box">
                    	<div class="info-pro">
                        	Đăng hình nhanh bằng cách <br>
                            kéo - thả hình vào vùng này hoặc bấm nút phía dưới
                        </div>
                        <div class="upload-image">
                                <span>Chọn hình</span>
                                <input name="file" type="file" class="file" id="upfile" multiple>
                        </div>
                    </div>
                    <div id="uploaded">
                    	<ul id="list-preview">
                        	<li id="img0" data="false">
                                    <img src="Images/icon-no-img.png">
                                    <span class="progressbar"></span>
                            </li>
                            <li id="img1" data="false">
                                    <img src="Images/icon-no-img.png">
                                    <span class="progressbar"></span>
                            </li>
                            <li id="img2" data="false">
                                    <img src="Images/icon-no-img.png">
                                    <span class="progressbar"></span>
                            </li>
                            <li id="img3" data="false">
                                    <img src="Images/icon-no-img.png">
                                    <span class="progressbar"></span>
                            </li>
                            <li id="img4" data="false">
                                    <img src="Images/icon-no-img.png">
                                    <span class="progressbar"></span>
                            </li>
                            <li id="img5" data="false">
                                    <img src="Images/icon-no-img.png">
                                    <span class="progressbar"></span>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="twocol">
                    <div class="label">HỌ TÊN</div>
                    <input type="text" class="name" name="txtFullName" id="txtFullName">
                 </div>
                 <div class="twocol">
                    <div class="label">EMAIL</div>
                    <input type="text" class="email" name="email" id="email">
                 </div>
                <div class="control">
                    <div class="showmess">Gơi ý: bạn nên đăng nhập để có thể theo dõi, sửa chữa và xóa tin đăng của bạn</div>
                 	<input type="button" name="commit" id="commit" value="Đăng tin " onClick=""/>
                     <div class="showerror" ></div>
                  </div>
                
            </form>
        	
        </div>
        <div class="right-panel">
        </div>
   </div>
</div>

<style >
.ads-box {
width: 800px;
height: auto;
position: absolute;
top: 0px;
left: 274px;
opacity: 1;
overflow: visible;

}
.ads-header {
width: 100%;
height: 40px;
background: #3498db;
position: relative;
padding: 5px 0;
text-transform: uppercase;

}
.close {
width: 20px;
height: 20px;
position: absolute;
right: 10px;
top: 10px;
background: url(Images/orderbox_close.png) no-repeat!important;
text-indent: 1000px;
}
.ads-header h3 {
padding-left: 10px;
margin: 0;
font-size: 18px;
color: #fff;
line-height: 36px;
}
.left-panel {
float: left;
width: 530px;
margin: 5px 0 10px 20px;
}
.title-ads {
border: 1px solid #d3d3d3;
margin-bottom: 6px;
}
#type-ads {
border: 0;
width: auto;
font-weight: bold;
background: transparent;
box-shadow: none;

height: 34px;

border-radius: 0;
width: 100px;
padding-right: 5px;

}
.cbotitle {
	float: left;
border: 0;
border-right: 1px solid #d3d3d3;
	
}
.txttile{
	float: left;
}
#titleads {
width: 426px;
border: 0;
font-weight: bold;
padding-left: 10px;
}
#contentads {
border: 1px solid #d3d3d3;
height: 100px;
width: 530px;
box-shadow: none;
resize: none;
overflow: auto;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 4px 5px 0 5px;
outline: none;
}

.twocol {
margin-top: 10px;
float: left;
width: 170px;
margin-bottom:15px;
}
.price-ads {
border: 1px solid #d3d3d3;
width: 150px;
height: 32px;


}
.price {
border: 0;
height: 32px;
width: 125px;
float: left;
}
.price-ads div {
font-weight: bold;
border-left: 1px solid #d3d3d3;
float: left;
padding: 5px;
}
.category {
background: transparent;
box-shadow: none;
height: 34px;
border: 1px solid #d3d3d3;
border-radius: 0;
width: 170px;
}
#drop-box {
float: left;
width: 396px;
height: 145px;
border: 4px dashed #d3d3d3;
margin-bottom: 10px;
margin-top: 4px;
margin-right: 8px;
}
 .info-pro {
text-align: center;
color: #959595;
padding: 40px 10px 5px 10px;
}
.upload-image {
border: 1px solid #dedede;
border-radius: 3px;
width: 100px;
margin: 0 auto;
z-index: 5;
height: 25px;
background: #fff;
background: linear-gradient(top, #fff 0%, #eee 100%);
background: -o-linear-gradient(top, #fff, #eee);
background: -moz-linear-gradient(top, #fff, #eee);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr ='#fff', endColorstr ='#eee');
background: -ms-linear-gradient(top, #fff, #eee);
text-align: center;
position: relative;
}
.file {
padding: 0;
border: 1px solid #d3d3d3;
border-radius: 0;
font-size: 13px;
box-shadow: none;
opacity: 0;
z-index: 10;
width: 100px;
height: 25px;
position: absolute;
left: 0;
}
#uploaded {
float: left;
width: 115px;
}
 #uploaded ul {
margin: 0;
padding: 0;
list-style: none;
}

#uploaded ul li {
float: left;
position: relative;
margin-right: 4px;
margin-bottom: 4px;
}
#txtFullName {
width: 150px!important;

}
 .left-panel input {
padding: 0;
border: 1px solid #d3d3d3;
height: 34px;
border-radius: 0;
font-size: 13px;
box-shadow: none;
}
 .control {
margin-top: 15px;
}
.showmess {
color: #ff8000;
font-size: 14px;
float: left;
margin: 0 0 10px 0;
}
 #commit{
border: 0;
box-shadow: none;
background: #3498db;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 4px 24px;
float: left;
}

.showerror {
display: none;
color: #f00;
float: left;
margin: 0 10px;
}
.right-panel {
float: left;
position: relative;
}
</style>
</html>
